<template>
  <div class="homePage-container">
    <div class="mapmask" @touchmove.prevent v-show="showmap == 1">
      <img
        src="@/assets/img/delete@2x.png"
        class="mapclose animated"
        :class="{'bounceInDown':mapA,'bounceOutDown':mapB}"
        v-show="showmap == 1"
        @click="closemap"
      >
      <div
        id="allmap"
        class="mymap animated"
        v-show="showmap == 1"
        :class="{'bounceInDown':mapA,'bounceOutDown':mapB}"
      ></div>
      <!-- <div
        id="allmap"
        :style="mapStyle"
        class="animated"
        :class="{'bounceInDown':mapA,'bounceOutDown':mapB}"
        v-show="showmap == 1"
      ></div>-->
      <div @click="reloadmap">
        <img
          src="@/assets/img/shuaxin@2x.png"
          class="reload animated"
          :class="{'bounceInRight':mapA,'bounceOutRight':mapB}"
          v-show="showmap == 1"
        >
      </div>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"></van-pull-refresh>
    <Affix>
      <div class="search" style="background:#fff">
        <div class="boxjiushi">
          <div class="location" @click="showmapdig">
            <img src="@/assets/img/icon_sy_dz.png" class="position-icon">
            <span>{{ city }}</span>
          </div>

          <div class="search-box">
            <van-search
              class="searchipt"
              @search="search"
              v-model="searchValue"
              @focus="Suk_tohistory"
              background="#fff"
            />
          </div>
        </div>
      </div>
    </Affix>

    <!-- <div id="allmap" ref="allmap"></div> -->
    <div class="banner-container boxjiushi" style="width:90%;height:145px;overflow:hidden">
      <!-- <div class="swiper-wrapper"> -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image.phth" class="showbannerimg" @click="Suk_tostoredetail(index)">
        </van-swipe-item>
      </van-swipe>
      <!-- <div class="swiper-slide">
          <img src="@/assets/img/img_banner.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="@/assets/img/img_banner.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="@/assets/img/img_banner.png" alt="">
      </div>-->
      <!-- </div> -->
    </div>
    <!-- 下面的是我们的食物类型选择 -->
    <div class="foottype-container boxjiushi">
      <div class="typebox" v-for="(item,index)  in tplist" :key="index" v-if="index<end && index >= start"
           @click="searchtp(index)">
        <div class="typesbox">
          <img :src="item.image" class="typeimg">
          <h3>{{ item.largeName }}</h3>
        </div>
      </div>
      <h4 class="rank-tit boxjiushi" @click="ckgd()" style="float: right;border-radius: 25px;border: 2px solid #fe9544">查看更多</h4>
      <!-- <div class="typebox"> -->
      <!-- <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>美食</span>
        </div>
        <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>趣味零食</span>
        </div>
        <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>下午茶</span>
        </div>
        <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>意面</span>
        </div>
        <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>炸鸡</span>
        </div>
        <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>西餐</span>
        </div>
        <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>中餐</span>
        </div>
        <div class="typesbox">
          <img src="@/assets/img/icon_meishi.png" class="typeimg">
          <span>汉堡包</span>
      </div>-->
      <!-- </div> -->
    </div>
    <!-- 下面的是我们的推荐 -->
    <h2 class="rank-tit boxjiushi">优选推荐</h2>
    <div class="rank-container boxjiushi">
      <div class="rank1box">
        <div class="first">
          <span class="numbox">No. 1</span>
          <img :src="imgno1" class="rank1img" :index="1" @click="searchno(0)">
        </div>
      </div>
      <div class="rank1box">
        <div class="rank2box">
          <div class="rank3box">
            <div class="third">
              <span class="numbox">No. 3</span>
              <img :src="imgno3" class="rank3img" :index="3" @click="searchno(2)">
            </div>
            <div class="third">
              <span class="numbox">No. 4</span>
              <img :src="imgno4" class="rank3img" :index="4" @click="searchno(3)">
            </div>
          </div>
          <div class="second">
            <span class="numbox">No. 2</span>
            <img :src="imgno2" class="ran2img" :index="2" @click="searchno(1)">
          </div>
        </div>
      </div>
    </div>

    <h1 class="rank-tit boxjiushi" @click="yhtc()" style="border-radius: 25px;border: 2px solid #fe9544">折扣套餐（超值）>>点击进入</h1>
    <div class="rank-container boxjiushi">

    </div>
    <!-- 下面的是我们的店家信息 -->
    <div class="good-container boxjiushi" id="xxkj">
      <div>
        <h1 class="goodtit">推荐商店</h1>
        <!-- <Affix :offset-top="40"> -->
        <div style="background:#fff;height:1rem;line-height:1rem">
          <span class="allrankbox class-uncheck" @click="allrank">综合排名 ></span>
          <span class="sales class-uncheck" @click="numrank">销量</span>
          <span class="distance class-uncheck" style="margin-left:5%">距离</span>
        </div>
        <!-- </Affix> -->
      </div>
      <!-- 这是我们的店家列表 -->
      <div class="noshop" v-if="noshop == 1">
        <img src="@/assets/img/none.png" class="noimg">
      </div>
      <div class="shoplistbox">
        <!-- <h1>推荐店铺</h1> -->
        <div class="jiushibox">
          <div
            class="shoplist"
            v-for="(item,index)  in arr"
            :key="index"
            @click="tostoredetail(index,item.status)"
          >
            <div class="shopleftbox">
              <img :src="item.logo">
            </div>
            <div class="shoprightbox">
              <div class="shoptbox">{{ item.diningName }}</div>
              <div class="shopmbox">
                <div>
                  <van-rate
                    class="shoprate"
                    :value="parseInt(item.grade)"
                    :size="15"
                    disabled
                    disabled-color="#ff9910"
                  />
                  {{ item.grade }}分
                </div>
                <div>餐盒费：{{ item.box }}元</div>
              </div>
              <div class="shopbbox">
                <div>简介：{{ item.diningIntro }}</div>
                <div style="color:#ff9b00">
                  <van-icon name="location-o"/>
                  {{ parseInt(item.distance / 1000) }}km
                </div>
              </div>
              <!-- <div>标签：{{ item.diningIntro }}</div> -->
            </div>
          </div>
        </div>
      </div>
      <!-- <div v-for="(item,index)  in arr" :key="index" class="list" @click="tostoredetail(index)">
        <div class="showimgbox">
          <img :src="item.image" alt>
        </div>
        <div class="showmbox">
          <h1 class="listtit">{{ item.diningName }}</h1>
          <van-rate :value="parseInt(item.grade)" :size="10" class="listrate"/>
          <span class="listdesc">{{ item.concent }}</span>
        </div>
        <div class="showrbox">
          <p style="text-align:right">大约30分钟内送到</p>
          <img src="@/assets/img/icon_juli.png">
          <span>{{ item.distance/1000 }}km</span>
        </div>
      </div>-->

      <div class="list-container"></div>
    </div>

    <!-- 下面的是我们的红包弹框 -->

    <div class="redpacketbox" @touchmove.prevent @scroll.prevent v-show="showred == 1">
      <!--<div class="redpacketbox" @touchmove.prevent @scroll.prevent>-->
      <div
        class="closeimg animated"
        :class="{'bounceInDown':isA,'bounceOutUp':isB}"
        @click="closered"
      >
        <img src="@/assets/img/delete@2x.png">
      </div>
      <div
        class="imgbox animated"
        :class="{'bounceInDown':isA,'hinge':isB}"
        @touchmove.prevent
        @scroll.prevent
      >
        <img src="@/assets/img/img_xryhq.png" class="redimg">
        <div class="redsbox">
          <div v-for="(item,index) in redlist" :key="index" style="margin-top:0.2rem">
            <div style="position:relative">
              <img src="@/assets/img/img_djq_bj.png" class="sredimg">
              <div class="reddescbox">
                <div class="dismoney">
                  <span>￥</span>
                  <span class="bigfontspan">{{ item.money }}</span>
                  <span>元</span>
                  <div class="bigfont" v-if="item.dinName!=null">
                    <div style="font-size:0.3rem">{{ item.dinName }}</div>
                  </div>
                  <span class="bigfont" v-else>
                    <div style="font-size:0.3rem">通用劵</div>
                  </span>
                  <div class="bigfont">
                    {{ item.name }}
                    <br>
                    <div style="font-size:0.3rem">单笔满{{ item.total }}元可用</div>
                  </div>
                  <div v-if="item.text == 0" class="hasbtn" @click="tohas(index)">点击领取</div>
                  <div v-if="item.text == 1" class="hasbtn">已领取</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import BMap from "BMap";
import History from "./history.vue";

export default {
  components: {
    History
  },
  data() {
    return {
      sumred: [],
      redtp: 0, //是否领取
      showmap: 0,
      start: 0,
      end: 8,
      // mapHeight: {
      //   type: Number,
      //   default: 400
      // },
      // // 经度
      // longitude: {
      //   type: Number,
      //   default: 116.404
      // },
      // latitude: {
      //   type: Number,
      //   default: 39.915
      // },
      // mapStyle: {
      //   //这是地图的长宽
      //   width: "90%",
      //   height: "300px"
      // },
      showred: 0,
      mapA: true,
      mapB: false,
      isA: true,
      isB: false,
      redlist: [],
      timer: null,
      loading: false,
      finished: false,
      imgno1: "",
      imgno2: "",
      imgno3: "",
      imgno4: "",
      imgno: [],
      noshop: 0,
      tplist: [],
      isLoading: false,
      images: [], //这是我们的轮播图图片
      city: "",
      searchValue: "请输入店铺信息",
      Citya: '',
      arr: [
        // {
        //   img:require("@/assets/img/img_msxp_1.png"),
        //   tit:'美食店铺',
        //   rate:5,
        //   desc:'简介：环境卫生，吃的放心'
        // },
        // {
        //   img:require("@/assets/img/img_msxp_1.png"),
        //   tit:'美食店铺',
        //   rate:1,
        //   desc:'简介：环境卫生，吃的放心'
        // },
        // {
        //   img:require("@/assets/img/img_msxp_1.png"),
        //   tit:'美食店铺',
        //   rate:2,
        //   desc:'简介：环境卫生，吃的放心'
        // },
        // {
        //   img:require("@/assets/img/img_msxp_1.png"),
        //   tit:'美食店铺',
        //   rate:3,
        //   desc:'简介：环境卫生，吃的放心'
        // }
      ]
    };
  },
  activated() {
    this.firstlogin();
    this.getredbag();
    this.getbannerlist();
    this.gettplist();
    this.getnoimg();
    debugger
    if (localStorage.getItem("sendsearch")) {
      this.Suk_searchhistory();
    } else {
      this.getlist();
    }
  },
  destroyed() {
    let taht = this;
    // localStorage.removeItem("firstlogin");
    localStorage.removeItem("sendsearch");
  },
  created() {

    if (localStorage.getItem("sendsearch")) {
      this.Suk_searchhistory();
    } else {
      this.getlist();
    }
    this.firstlogin();
    this.getredbag();
    this.getbannerlist();
    this.gettplist();
    this.getnoimg();
  },

  mounted: function () {
    this.loadmap();
    this.android_location();
  },
  methods: {
    yhtc() {
      let that = this;
      that.$router.push({
        name: "taocan"
      });
    },
    // 这是我们的高德地图
    loadmap() {
      const map = new AMap.Map("allmap", {
        zoom: 15,
        center: [localStorage.getItem("long"), localStorage.getItem("lat")] //中心点坐标
      });
      var marker = new AMap.Marker({
        position: [localStorage.getItem("long"), localStorage.getItem("lat")]
      });
      map.add(marker);
      // AMapUI.loadUI(...) //加载UI组件
    },
    tomylocation() {
      var marker = new AMap.Marker({
        position: [localStorage.getItem("long"), localStorage.getItem("lat")]
      });
      map.add(marker);
    },
    ckgd() {
      let that = this
      if (that.end + 1 < that.tplist.length) {
        that.start = that.start + 8
        that.end = that.end + 8
      } else {
        that.start = 0
        that.end = 8
      }

    },
    android_location() {

      let that = this;
      dsBridge.call("getLocation");
      dsBridge.register("setLocation", function (data) {
        that.Citya = JSON.parse(data).City;
        that.getnoimg(that.Citya);
//    	alert(that.shi)
//         alert(JSON.parse(data).City);
        let str = JSON.parse(data);
        that.city = str.District;
//      alert(that.city)
        localStorage.setItem("city", str.City);
        localStorage.setItem("long", str.longitude);
        localStorage.setItem("lat", str.latitude);
        // confirm(that.longLat);
      });

    },
    Suk_searchhistory() {
      let that = this;
      //localStorage.getItem("sendsearch");
      if (localStorage.getItem("sendsearch")) {
        that.searchValue = localStorage.getItem("sendsearch");
        that.search();
      }
    },
    // 这里是到我们的历史搜索
    Suk_tohistory() {
      let that = this;
      that.$router.push({
        name: "history"
      });
    },
    //是否为第一次登陆
    firstlogin() {
      let that = this;
      // let firstlogin = localStorage.getItem("firstlogin");
      // if (firstlogin) {
      if ($.cookie("isClose") != 'yes') {
        $.cookie("isClose", 'yes', {expires: 1 / 2});//一天
        that.showred = 1;
      }
      // localStorage.removeItem("firstlogin");
    },
    //下面的是领取红包
    tohas(index) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        couponId: that.redlist[index].id,
        userId: localStorage.getItem("userid")
      };
      that.axios
        .post(
          that.baseUrl + "/myCoupon/insertMyCoupon",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.getredbag2();
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    //dierci获取红包
    getredbag2() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        id: localStorage.getItem("userid"),
        counId: that.sumred.slice(0, 3).join(",")
      };

      that.axios
        .post(that.baseUrl + "/coupon/queryXin", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            console.log(res.data.data.list, "red");
            if (res.data.data.list.length == 0) {
              that.showred = 0;
            }
            if (res.data.meta.code == 200) {
              let redarr = res.data.data.list;
              that.redlist = redarr;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    //获取红包
    getredbag() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });

      var Sukdata = {
        id: localStorage.getItem("userid")
      };

      that.axios
        .post(that.baseUrl + "/coupon/queryXin", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.data.list.length == 0) {
              that.showred = 0;
            }
            if (res.data.meta.code == 200) {
              let redarr = res.data.data.list;
              that.redlist = redarr;
              for (let i = 0; i < 3; i++) {
                that.sumred.push(that.redlist[i].id);
              }
              console.log(that.sumred.join(","), "red1111111111111111111111");
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    showmapdig() {
      let that = this;
      window.scrollTo(0, 0);
      that.showmap = 1;
    },
    // 下面的是关闭地图的操作
    closemap() {
      let that = this;
      that.mapA = false;
      that.mapB = true;
      setTimeout(() => {
        that.showmap = 0;
        that.mapA = true;
        that.mapB = false;
      }, 800);
    },
    // 下面的是刷新地图的操作
    reloadmap() {
      this.ready();
    },
    // 下面的是接原生地图
    // Suk_map() {
    //   dsBridge.call("getLocation");
    //   dsBridge.register("setLocation", function(data) {
    //     that.city = data.City;
    //     alert(data.City);
    //     confirm(data);
    //     localStorage.setItem("latitude", data.latitude);
    //     localStorage.setItem("longitude", data.longitude);
    //   });
    // },
    // 下面的是地图
    ready: function () {
      // let that = this;
      // let map = new BMap.Map("allmap"); //  新建百度地图对象
      // let point = new BMap.Point(this.longitude, this.latitude); //这里是我们的经纬度
      // let marker = new BMap.Marker(point); //这是标记我们的经纬度
      // // var sContent ="天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门..."
      // map.addOverlay(marker); //在地图上标记
      // map.centerAndZoom(point, 15); //设置中心店和缩放等级
      // map.enableScrollWheelZoom(true); //开启缩放功能
      // // var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
      // // map.openInfoWindow(infoWindow,point); //开启信息窗口
      // // document.getElementById("r-result").innerHTML = "信息窗口的内容是：<br />" + infoWindow.getContent();
      // var geolocation = new BMap.Geolocation();
      // // 开启SDK辅助定位
      // geolocation.enableSDKLocation();
      // geolocation.getCurrentPosition(function(r) {
      //   that.city = r.address.city;
      //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      //     var mk = new BMap.Marker(r.point);
      //     map.addOverlay(mk);
      //     map.panTo(r.point);
      //     alert("您的位置：" + r.point.lng + "," + r.point.lat);
      //   } else {
      //     alert("failed" + this.getStatus());
      //   }
      // });
      // let geolocation = new BMap.Geolocation();
      // geolocation.getCurrentPosition(function(r) {
      //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      //     var mk = new BMap.Marker(r.point);
      //     localStorage.setItem("latitude", r.latitude);
      //     localStorage.setItem("longitude", r.longitude);
      //     that.city = r.address.city;
      //     map.addOverlay(mk);
      //     map.panTo(r.point);
      //       "您的位置：" + r.address.city + r.point.lng + "," + r.point.lat
      //     );
      //   } else {
      //     alert("failed" + this.getStatus());
      //   }
      // });
      // geolocation.getCurrentPosition(function(r) {
      //     localStorage.setItem('latitude',r.latitude)
      //     localStorage.setItem('longitude',r.longitude)
      //     let mk = new BMap.Marker(r.point);
      //     map.panTo(r.point);
      //     that.city = r.address.city
      //     map.addOverlay(mk);
      // if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      //   let mk = new BMap.Marker(r.point);
      //   map.addOverlay(mk);
      //   map.panTo(r.point);
      //   alert("您的位置：" + r.address.city + r.point.lng + "," + r.point.lat);
      // } else {
      //   alert("failed" + this.getStatus());
      // }
      // });
    },
    //  map(){
    //   let map =new BMap.Map(this.$refs.allmap); // 创建Map实例
    //   map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别
    //   map.addControl(new BMap.MapTypeControl({//添加地图类型控件
    //     mapTypes:[
    //       BMAP_NORMAL_MAP,
    //       BMAP_HYBRID_MAP
    //     ]}));
    //   map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
    //   map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // },
    closered() {
      this.isA = false;
      this.isB = true;
//    this.isB = false;
      this.timer = setTimeout(() => {
        this.showred = 0;
      }, 1200);
    },
    getnoimg(Citya) {
//  	alert(Citya)
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        address: Citya
      };

      that.axios
        .post(that.baseUrl + "/dining/getTuijian", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.imgno = res.data.data;
              that.imgno1 = res.data.data[0].logo;
              that.imgno2 = res.data.data[1].logo;
              that.imgno3 = res.data.data[2].logo;
              that.imgno4 = res.data.data[3].logo;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    searchno(index) {
      let that = this;
      let storeid = that.imgno[index].id;
      localStorage.setItem("storeid", storeid);
      that.$router.push({
        name: "storedetail"
      });
    },
    numrank() {
      let that = this;
      let toast1 = that.$toast.loading({
        message: "加载中...",
        duration: 0
      });
      var Sukdata = {
        lat1: localStorage.getItem("lat"),
        lng1: localStorage.getItem("long"),
        sum: 3
      };

      that.axios
        .post(that.baseUrl + "/dining/query", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.arr = res.data.data.list;
              toast1.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    allrank() {
      let that = this;
      let toast1 = that.$toast.loading({
        message: "加载中...",
        duration: 0
      });
      var Sukdata = {
        lat1: localStorage.getItem("lat"),
        lng1: localStorage.getItem("long"),
        sum: 1
      };

      that.axios
        .post(that.baseUrl + "/dining/query", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              if (that.res.data.data.length > 0) {
                that.arr = res.data.data.list;
              } else {
                noshop = 0;
              }
              toast1.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 刷新操作
    onRefresh() {
      setTimeout(() => {
        this.getlist();
        this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 500);
    },
    //这里是我们的查询操作
    search() {
      if (localStorage.getItem("sendsearch")) {
        let that = this;
        let toast4 = that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          diningName: that.searchValue,
          userId: localStorage.getItem("userid")
        };

        that.axios
          .post(
            that.baseUrl + "/dining/queryLiShi",
            that.Qs.stringify(Sukdata),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function (res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                if (res.data.data == "查询失败！") {
                  // console.log(that.arr, "result");
                  that.noshop = 1;
                  that.arr = "";
                } else {
                  // console.log(res.data, "search");
                  that.arr = res.data.data;
                  that.noshop = 0;
                }
                toast4.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      }
    },
    //获取轮播图的别表
    getbannerlist() {
      let that = this;
      let toast2 = that.$toast.loading({
        message: "加载中...",
        duration: 0
      });
      var Sukdata = {};

      that.axios
        .post(
          that.baseUrl + "/banner/queryBanner",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.images = res.data.data;
              toast2.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    gettplist() {
      let that = this;
      let toast3 = that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {};

      that.axios
        .post(that.baseUrl + "/large/query", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.tplist = res.data.data;
              toast3.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 这是我们的店铺列表
    getlist() {
      let that = this;
      let toast1 = that.$toast.loading({
        message: "加载中...",
        duration: 0
      });
      var Sukdata = {

        lat1: localStorage.getItem("lat"),//39.916527,//
        lng1: localStorage.getItem("long"),//116.397128,//
        sum: 6
      };

      that.axios
        .post(that.baseUrl + "/dining/query", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            console.log(res.data, "list");
            if (res.data.meta.code == 200) {
              // console.log(res.data.data.list, "shoplist");
              if (res.data.data == "查无数据") {
                that.noshop = 1;
                that.arr = "";
              } else {
                that.arr = res.data.data.list;
                that.noshop = 0;
              }
              toast1.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
//  去商店
    tostoredetail(index, status) {
      let that = this;
      console.log(status)
      if (status == 0) {
        that.$toast.loading({
          message: "该商家暂停营业"
        });
      } else {
        let storeid = that.arr[index].id;
        localStorage.setItem("storeid", storeid);
        that.$router.push({
          name: "storedetail"
          // params:{
          // storeid:storeid,
          // }
        });
      }

    },
    searchtp(index) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        largeId: that.tplist[index].largeId,
        lat1: localStorage.getItem("lat"),//39.916527,//
        lng1: localStorage.getItem("long"),//116.397128,//
        sum: 1
      };

      that.axios
        .post(that.baseUrl + "/dining/queryXianJie", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              if (res.data.data == "查无数据") {
                that.noshop = 1;
                that.arr = "";
              } else {

                setTimeout(function () {
                  that.$toast("查询成功...");
                }, 1200);
                jQuery('html,body').animate({
                  scrollTop: jQuery("#xxkj").offset().top - 50
                }, 300);
                that.arr = res.data.data.list;
                that.noshop = 0;
              }
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    Suk_tostoredetail(index) {
      let that = this;
      localStorage.setItem("storeid", that.images[index].dinId);
      that.$router.push({
        name: "storedetail"
      });
      console.log(that.images[index]);
    }
  }
};
</script>
<style lang="scss" scoped>
#allmap {
  width: 300px;
  height: 180px;
}

// #app {
//   font-family: 'Avenir', Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
//   margin-top: 60px;
// }
// #allmap{
//   height: 500px;
//   overflow: hidden;

// }
body {
  background: #fff;
}

.homePage-container {
  width: 100%;
  font-size: 0.3rem;
  background: #fff;
}

.rank-container img {
  border-radius: 0.2rem;
}

.search {
  width: 100%;
  height: 40px;
  line-height: 40px;
  /* border-bottom: 1px solid #a0a0a0; */
  // box-shadow: 5px 5px 20px 5px #ececec;
}

.boxjiushi {
  width: 90%;
  margin: 0 auto;
}

.rank-tit {
  margin-top: 15px;
  color: #fe9544;
  // font-family: "楷体";
  font-weight: 100;
  margin-bottom: 10px;
  text-indent: 15px;
}

.position-icon {
  width: 17px;
  height: 21px;
  vertical-align: middle;
}

.foottype-container {
  overflow: hidden;
}

.rank-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.search-box {
  width: 70%;
  margin-top: 0.2rem;
  float: right;
  vertical-align: middle;
}

.searchipt {
  border: 1px solid #a0a0a0;
  height: 0.7rem;
  overflow: hidden;
  line-height: 30px;
  border-radius: 15px;
  text-align: center;
  vertical-align: middle;
}

.banner-container {
  margin-top: 15px;
}

.swiper-slide {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
}

.typesbox {
  width: 24%;
  display: flex;
  float: left;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  color: #5d3b24;
  font-size: 10px;
}

.typeimg {
  height: 45px;
}

.rank1box {
  width: 48%;
  height: 140px;
  display: inline-block;
}

.rank2box {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.rank3box {
  display: flex;
  width: 100%;
  height: 48%;
  flex-direction: row;
  justify-content: space-between;
}

.first {
  width: 100%;
  height: 100%;
}

.second {
  height: 48%;
}

.third {
  width: 48%;
  height: 100%;
}

.rank1img {
  width: 100%;
  height: 100%;
}

.ran2img {
  width: 100%;
  height: 100%;
}

.rank3img {
  width: 100%;
  height: 100%;
}

.numbox {
  position: absolute;
  display: inline-block;
  text-align: center;
  background: #fe9544;
  width: 60px;
  height: 15px;
  line-height: 15px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #ffffff;
}

.goodtit {
  margin-top: 15px;
  color: #fe9544;
  // font-family: "楷体";
  font-weight: 100;
  text-indent: 5px;
}

.allrankbox {
  font-size: 15px;
  // font-family: "楷体";
  margin-right: 15px;
}

.goodspan {
  // font-family: "楷体";
}

.class-uncheck {
  color: #a0a0a0;
}

.allrankbox:active {
  color: #000;
}

.list-container {
  margin-bottom: 80px;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
  height: 2rem;
}

.showimgbox {
  width: 3.2rem;
  height: 1.8rem;
  border-radius: 5px;
}

.showimgbox img {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}

.showbannerimg {
  width: 100%;
}

.listtit {
  font-weight: 500;
  font-size: 0.3rem;
  text-indent: 5px;
}

.listdesc {
  font-family: "楷体";
  color: #9e9e9e;
  display: inline-block;
  height: 10px;
  text-indent: 5px;
  line-height: 10px;
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /*显示行数*/
}

.showrbox img {
  width: 13px;
  height: 16px;
  margin-left: 15%;
  margin-top: 5px;
}

.showrbox span {
  display: inline-block;
  margin-top: 5px;
}

.showmbox {
  width: 40%;
}

.showrbox {
  width: 35%;
  font-size: 1px;
  color: #a0a0a0;
}

.ipttit {
  position: absolute;
  // z-index: 999;
  top: -3px;
  right: 20%;
}

.noshop {
  width: 100%;
  text-align: center;
  font-size: 0.5rem;

  .noimg {
    width: 100%;
  }
}

.imgbox {
  width: 70%;
  margin: 0 auto;

  .redimg {
    width: 100%;
  }
}

.redpacketbox {
  background: rgba($color: #000000, $alpha: 0.4);
  padding-top: 3rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
}

.redsbox {
  z-index: 999;
  left: 10%;
  position: absolute;
  top: 2.5rem;
}

.sredimg {
  width: 6rem;
  height: 3rem;
}

.reddescbox {
  position: absolute;
  top: 0.4rem;
  left: 0.5rem;
  color: #fff;

  .bigfont {
    display: inline-block;
  }

  .bigfontspan {
    font-size: 0.9rem;
  }

  .bigfont {
    font-size: 0.5rem;
  }

  .hasbtn {
    width: 3.783rem;
    height: 0.733rem;
    line-height: 0.733rem;
    border-radius: 0.3rem;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    color: #b555e3;
  }
}

.closeimg {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  right: 1.5rem;
  top: 2.5rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.location {
  display: inline-block;
}

#allmap {
  position: absolute;
  left: 5%;
  top: 3rem;
  z-index: 999;
}

.mapmask {
  position: absolute;
  z-index: 998;
  top: 0;
  width: 100%;
  height: 20rem;
  background: rgba($color: #000000, $alpha: 0.4);
}

.reload {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  right: 0.8rem;
  top: 9.5rem;
  z-index: 999;
}

.mapclose {
  position: absolute;
  z-index: 999;
  width: 0.8rem;
  height: 0.8rem;
  right: 5%;
  top: 2rem;
}

.shoplistbox {
  background: #fff;
  margin-top: 0.3rem;

  h1 {
    font-weight: 500;
    height: 0.75rem;
    line-height: 0.75rem;
    font-size: 0.5rem;
    color: #ff9b00;
    text-indent: 0.5rem;
    border-bottom: 1px solid #ffe1b0;
  }

  .shoplist {
    display: flex;
    width: 100%;
    align-items: center;
    // padding: 0.2rem 0;
    justify-content: space-between;

    .shopleftbox {
      width: 2.5rem;
      height: 2rem;
      border-radius: 0.3rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .shoptbox {
      font-size: 0.4rem;
    }

    .shoprightbox {
      color: #2f2e2e;
      width: 70%;
      height: 2.5rem;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-around;

      .shoprate {
        display: inline-block;
      }

      .shopmbox {
        display: flex;
        justify-content: space-between;
      }

      .shopbbox {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
